<template>
  <div>
    <el-form ref="form" :model="form">
      <!-- 手机号输入框 -->
      <el-form-item>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="form.name"
        >
        </el-input>
      </el-form-item>
      <!-- 密码输入框 -->
      <el-form-item>
        <el-input
          show-password
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="form.name"
        >
        </el-input>
      </el-form-item>
      <!-- 验证码输入框 -->
      <el-form-item>
        <el-row>
          <el-col :span="17">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="form.name"
            >
            </el-input>
          </el-col>
          <el-col :span="7">
            <img src="../../assets/code.png" alt="" />
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 单选框文字部分 -->
      <el-form-item>
        <el-checkbox v-model="form.checked">
          <el-link :underline="false" type="info">我已阅读并同意</el-link>
          <el-link type="primary">用户协议</el-link>
          <el-link :underline="false" type="info">和</el-link>
          <el-link type="primary">隐私条款</el-link>
        </el-checkbox>
      </el-form-item>
      <!-- 登陆注册按钮 -->
      <el-form-item>
        <el-button type="primary" id="my-btn">登陆</el-button>
        <el-button type="primary" id="my-btn_">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: 'jay-zhou',
        checked: true
      }
    }
  },
  methods: {}
}
</script>

<style scoped>
.el-button {
  width: 100%;
}
#my-btn_ {
  margin-left: 0;
}
#my-btn {
  margin-bottom: 20px;
}
</style>
